<template>
  <div>
    <!--  1.1 使用A模块的state数据  -->
    <p>{{ $store.state.moduleA.username }}</p>
    <!--  1.2 使用A模块的state数据  -->
    <p>{{ $store.getters.newName }}</p>

    <!--  2.1 使用B模块的state数据  -->
    <p>{{ $store.state.moduleB.username }}</p>
    <!--  2.2 使用B模块的state数据  -->
    <p>{{ $store.getters['moduleB/newName'] }}</p>

    <el-button @click="mutationFn">mutationFn</el-button>
    <el-button @click="actionFn">actionFn</el-button>

  </div>
</template>


<script>
import {useStore} from "vuex";

export default {
  name: 'App',

  setup() {
    const store = useStore();
    const mutationFn = () => {
      store.commit('moduleB/updateName');
    }
    const actionFn = () => {
      store.dispatch('moduleB/updateName')
    }
    return {
      mutationFn,
      actionFn
    }
  }

}
</script>

<style>

</style>